<template>
	<div ref="wrapper">
		<div class="content">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	//导入滚动框架 better-scroll
	import BScroll from 'better-scroll'
	
	export default {
		name: "Scroll",
		props: {
			probeType: {
				type: Number,
				default: 0
			},
			pullUpLoad: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return {
				scroll: null
			}
		},
		mounted(){	
			//1.创建BScroll实例
			this.scroll = new BScroll(this.$refs.wrapper, {
				click: true,
				probeType: this.probeType,
				pullUpLoad: this.pullUpLoad
			})
			
			//console.log(this.scroll)
			
			//2.实时监听滚动事件
			this.scroll.on('scroll', (position) => {
				//console.log(position)
				
				this.$emit('scroll', position)
			})
			
			//3.监听上拉加载更多事件
			this.scroll.on('pullingUp', () => {
				//console.log('上拉加载更多~~~')
				
				this.$emit('pullingUp')
			})
			
		},
		methods: {
			scrollTo(x, y, time=300){
				this.scroll &&  this.scroll.scrollTo(x, y, time)
			},
			finishPullUp(){
				this.scroll.finishPullUp()
			},
			refresh(){
				//console.log('~~~')
				this.scroll && this.scroll.refresh()
			},
			getScrollY(){
				return this.scroll ? this.scroll.y : 0
			}
		}
	}
</script>

<style scoped="scoped">
</style>
